<template>
  <div class="clearfix Sing_img_pof" :class="{'POSIAU':this.POSIHF}">
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- ------------搜索----------- -->
    <section class="Sing_img_search">
      <img src="../../../static/images/aide/seach_img.png" alt="">              
      <section class="dip ju_al Sing_img_box">
        <input type="text" class="Sing_img_input bdr" placeholder="请输入您希望的任务类型" @blur="isnumber()" v-model="val">
        <button class="Sing_img_btn bdr" @touchstart="seachBtn()">{{this.seach}}</button>
        <button class="seach_icon" @touchstart="seachBtn()"></button>
      </section>
    </section>
    <!-- ------------teb切换----------- -->    
    <section class="Sing_bg_content">
      <!-- ------------选项----------- -->     
      <ul class="Sing_teb dipW clearfix">
        <li class="Sing_items_box dip ju_al">
          <aside class="Sing_items dip ju_al" v-for="(items,index) in Singitems" :key="index" @touchstart="tebAdd(index,items.posia)" :class="{'activeColor':items.IFColor}">
            <span>{{items.text}}</span>
            <i v-if="items.IFdisplay" class="Sing_items_icon"></i>
            <i v-if="items.IFBBG" class="Sing_items_iconActive"></i>
          </aside>
        </li>
        <!-- ------------背景----------- -->                
        <li  class="Sing_ul_bg" v-show="this.IFulbg" @click="nonoBG_hei()" >
          <div class="Sing_items_list" v-if="this.IFList" >
            <div class="dipW ju_al Sing_litems_pad clearfix">
              <aside class="Sing_list_content" v-for="(list,ind) in itemsContent" :key="ind" @click="ConAdd(ind,list.posia)" :class="{'itemsColorACTive':list.itemsColor}">{{list.itemstext}}</aside>
            </div>
            <div class="list_last"></div>
          </div>
        </li>
      </ul>
      <!-- ------------内容----------- -->           
      <ol class="Si_ol_box clearfix"  v-if="NoneData">
        <li class="Si_ol_items dipW" v-for="(taskFor,indexID) in typrLIst " :key="indexID" @click="taskLIstAdd(taskFor.id)">
          <aside class="dip ju_al_bet ol_li_list ol_list_hei">
            <!-- 头像 -->
            <span class="dip ju_al_lf ol_li_list1">
              <span class="ol_li_lisiImglogo">
                <img :src="taskFor.picture" alt="">                
              </span>
              <!-- <i class="ol_li_list2" v-if="taskFor.nickName != '' && taskFor.nickName != null">{{taskFor.name}}</i> -->
              <i class="ol_li_list2" v-if="taskFor.name != '' && taskFor.name != null">{{taskFor.name}}</i>
              <i class="ol_li_list2" v-else style="font-family: Arial, Helvetica,sans-serif;">{{taskFor.contactNumber}}</i>
            </span>
            <!-- 状态 -->
            <span class="ol_li_list1 ol_li_actcor1 ol_li_hg" :class="{'ol_li_actcor2':taskFor.currentState == '待合作'}">{{taskFor.currentState}}</span>
            <!-- <span class="ol_li_list1 ol_li_actcor2 ol_li_hg">{{taskFor.currentState}}</span> -->
          </aside>
          <aside class="dip ju_al_bet ol_li_list">
            <span class="dip ju_al_lf ol_li_list1">
              <i>{{OlListTitle.tasktitle}}</i>
              <i>{{taskFor.requirements}}&nbsp;x&nbsp;{{taskFor.quantity}}</i>
            </span>
            <span class="dip ol_li_list1 ju_al_lf ol_list1_last">
              <i>{{OlListTitle.Pricetitle}}</i>
              <i class="ol_li_cormoery" style="font-family: Arial, Helvetica,sans-serif;">￥{{taskFor.remuneration}}</i>
            </span>
          </aside>
          <aside class="dip ju_al_bet ol_li_list">
            <span class="dip ju_al_lf ol_li_list1">
              <i>{{OlListTitle.industryTitle}}</i>
              <i>{{taskFor.demandType}}</i>
            </span>
            <span class="dip ol_li_list1 ju_al_lf ol_list1_last">
              <i>{{OlListTitle.timeTitle}}</i>
              <i>{{taskFor.requireTime}}</i>
            </span>
          </aside>
        </li>  
      </ol>
      <div class="Si_ol_box clearfix" v-else>
        <span class="Si_ol_itemsNOne">暂无数据</span>
      </div>
    </section>
  </div>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
import Specific from '../../assets/bus/js/Specific.js'
export default {
  data(){
    return{
      seach:'搜索',
      val:'',
      urls:{
        url:'/bomNav',
        // url:'',
        text:'接单助手',
      },
      Singitems:[
        {
          text:'海报',
          IFdisplay:false,
          IFColor:true,
          posia:'00',
        }
        ,{
          text:'宣称片',
          IFdisplay:true,
          IFColor:false,
          IFBBG:false,
          posia:'',
        }
      ],
      itemsContent:[
        {
          itemsColor:true,
          itemstext:'不限',
          posia:'01',
        }
        ,{
          itemsColor:false,
          itemstext:'图片宣传片',
          posia:'0100',
        }
        ,{
          itemsColor:false,
          itemstext:'实拍宣传片',
          posia:'0101',
        }
        ,{
          itemsColor:false,
          itemstext:'动画宣传片',
          posia:'0102',
        }
      ],
      IFList:false, //下拉菜单
      IFulbg:false, //ul下的背景
      OlListTitle:{
        tasktitle:'任务要求：',
        Pricetitle:'作品总价：',
        industryTitle:'使用行业：',
        timeTitle:'截稿时间：'
      },
      typrLIst:'', //获取列表
      NoneData:true,
      POSIHF:false, //滚动条
    }
  },
  methods:{
    nonoBG_hei(){
      this.Singitems[1].IFBBG = !this.Singitems[1].IFBBG// 下箭头
      this.Singitems[1].IFdisplay = !this.Singitems[1].IFdisplay//上箭头
      this.IFList = false; //下拉菜单
      this.IFulbg = false //ul背景
      // this.Singitems[1].IFColor = !this.Singitems[1].IFColor
      this.Singitems[1].IFColor = false
      this.Singitems[0].IFColor = false
      this.POSIHF = false //ul背景
      
    },
    isnumber(){
      this.val = ''      
    },
    seachBtn(){
      if(this.val != ""){
        var value = this.val
        this.taskAdd(value,'','')
        
      }else{
        alert('请输入要查找的任务')
      }
    },
    taskLIstAdd(id){
      this.$router.push({
        path:'/bomNav/Ordershuo'
      })
      sessionStorage.setItem('demandId',id)
    },
    tebAdd(index,obj){
      if(index == 1){
        this.Singitems[1].IFBBG = !this.Singitems[1].IFBBG// 下箭头
        this.Singitems[1].IFdisplay = !this.Singitems[1].IFdisplay//上箭头
        this.IFList = !this.IFList; //下拉菜单
        this.IFulbg = !this.IFulbg //ul背景
        this.POSIHF = true //滚动条破
        // this.Singitems[1].IFColor = !this.Singitems[1].IFColor
        this.Singitems[1].IFColor = true == !this.Singitems[1].IFColor
        this.Singitems[0].IFColor = false
        //弹出内容
      }else if(index == 0){
        this.IFList = false;   //下拉菜单   
        this.IFulbg = false;   //ul背景  
        this.POSIHF = false;   //滚动条破 
        this.Singitems[1].IFdisplay = true //这是上面的箭头 {下}
        this.Singitems[1].IFBBG = false //这是上面的箭头 {上}
        this.Singitems[1].IFColor = false //这是color
        this.Singitems[0].IFColor = true
        //调用接口
         this.taskAdd('',1,obj)
      }
    },
    ConAdd(ind,obj){
      for(var i = 0;i<this.itemsContent.length;i++){
        this.itemsContent[i].itemsColor= false
      }
      this.itemsContent[ind].itemsColor = true;      
      this.taskAdd('',1,obj)
      this.IFList = false //下拉菜单
      this.IFulbg = false //ul背景
      this.Singitems[1].IFdisplay = true 
      this.Singitems[1].IFBBG = false
      this.Singitems[1].IFColor = false
      this.POSIHF = false; 
    },
    taskAdd(title,type,obj){
      this.$store.dispatch('showloader')      
      var ti = title == '' ? null:title
      var tif = obj == '' ? null:obj
      var tig = type == '' ? null:type
      var _this = this
      var taskObj = {
        "title":ti,
        "requirements":tif,//这是传的值
        "demandType":null,
        "currentState":null,
        "requireTime":null, 
        "currentPage":tig, 
        "pageSize":"5" ,
        "refer":"create_date",
	      "queue":"DESC",
      }
      // console.log(taskObj)
      this.axios.post(this.$busPoat.pagelist(),taskObj).then(res =>{
        // console.log(res.data)
        var st;
        clearTimeout(st)
        st = setTimeout(() =>{
          if(res != null || res != undefined){
            if(res.data.iplancode == 200){
              if(res.data.totalNumber > 0){ 
                _this.NoneData = true            
                _this.typrLIst = res.data.orders
                Specific.specilcArr(_this.typrLIst) 
                // sessionStorage.setItem('demandId',JSON.stringify(_this.typrLIst))
                // console.log(JSON.parse(sessionStorage.getItem('demandId'))) 
              }else {
              _this.NoneData = false
              }
            }else if(res.data.iplancode == 101){
              alert("任务列表获取失败")
              _this.NoneData = false
            }
            this.$store.dispatch('hideloader')
          }else{
            this.$store.dispatch('hideloader')            
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },2000)
      }).catch(err =>{
        this.$store.dispatch('hideloader')
        alert('任务列表获取失败')
        _this.NoneData = false
        
      })
    }
  },
  created(){
    // this.$router.go(0)
    this.taskAdd('',1,'00')
  },
  ////////
  beforeRouteLeave (to, from, next) {
    if(to.path == '/bomNav/taskseccess'){
      next({ path: '/bomNav'})
    }else {
      next();
    }
  },
  components:{Nav}
}
</script>
<style lang="scss" scoped>
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
  color: #C1C1C1;
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
  color: #C1C1C1;
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
  color: #C1C1C1;
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  color: #C1C1C1;
} 
.Sing_img_pof{
  top:.8rem;
  position:relative;;
  // margin-top:.8rem;
  left:0;
  width: 100%;
  height: 100%;
}
.POSIAU{
  overflow: hidden; 
  position: fixed;
}
.Task_con_box{
  background: #f2f2f2;
  margin-bottom:0;
}
.Sing_img_search{
  width: 100%;
  height: 2.5rem;
  position: relative;
  // background-image: url('../../../static/images/aide/seach_img.png');
  // background-position-x: center;
  // background-position-y: center;
  // -moz-background-size:100%;
  // background-size: 100%;
  // background-repeat: no-repeat;
  img{
    width: 100%;
    height: 100%;
  }
  .Sing_img_box{
    position: absolute;
    bottom:8%;
    width: 100%;
    height: 0.66rem;
    font-size:.26rem;
    .Sing_img_input{
      height: 100%;
      width:55.3%;
      padding:2%;
      padding-left:8%;
      font-size: .22rem;
      color:#C1C1C1;
    }
    .Sing_img_btn{
      height: 100%;
      width: 15%;
      background: #fff;
      color:#666;
      margin-left:1%;
      font-weight: 600;
    }
    .seach_icon{
      position: absolute;
      width: 3.5%;
      height: 42%;
      left:18%;
      top:30%;
      background:transparent;
      background-image: url('../../../static/images/aide/seach_icon.png');
      background-position-x: center;
      background-position-y: center;
      -moz-background-size:100%;
      background-size: 100%;
      background-repeat: no-repeat;
    }
  }
}
.Sing_bg_content{
  background: #f2f2f2;
  width: 100%;
  // position: relative;
  height: 100%;
  .Sing_teb{
    // position: fixed;
    position: relative;
    left:0;
    // top:3.3rem;
    top:0;
    width: 100%;
    // height: 100%;
    z-index: 1;
    font-size:.26rem;
    font-weight:550; 
    .Sing_items_box{
      width:100%;
      height: 0.8rem;
      padding:.1rem 0rem;
      position: relative;
      border-bottom:.02rem solid #dedede;
          -webkit-box-shadow: #dedede 0rem 0.01rem 0.1rem 0rem;
     -moz-box-shadow: #dedede 0rem 0.01rem 0.1rem 0rem;
          box-shadow: #dedede 0rem 0.01rem 0.1rem 0rem;
      .Sing_items{
        width: 49%;
        height: 100%;
        color:#666666;
        &:nth-child(2){
          border-left:0.01rem solid #dedede;
          i{    
            width: 0.2rem;
            height: 0.12rem;
            margin-left:.1rem;
            background-position-x: center;
            background-position-y: center;
            -moz-background-size:100%;
            background-size: 100%;
            background-repeat: no-repeat;
          }
          .Sing_items_icon{
            background-image: url('../../../static/images/aide/sing_items_icon.png');
          }
          .Sing_items_iconActive{
            background-image: url('../../../static/images/aide/sing_items_iconActive.png');
          }
        }
      }
      .activeColor{
         color:#FF7200;
      }
    }
    .Sing_items_list{
      position: absolute;
      top:0rem;
      width: 100%;
      // height: 100%;
      left:0;
      background: #fff;               
      // height: 4.2rem;
      font-size: .24rem;
      z-index: 3;
      .Sing_litems_pad{
        padding:0rem .4rem;
        width: 100%;
      }     
      .Sing_list_content{
        height: 0.85rem;
        width: 100%;
        color:#666666;
        text-align: center;
        line-height: .85rem;
        border-bottom:.01rem solid#dedede;
      }
      .itemsColorACTive{
        color:#FF7200;
      }
      .list_last{
        margin-top:.3rem;
        background:#F2F2F2;
        width: 100%;
        height: 0.3rem;
        // position: absolute;
        // bottom:-.6rem;
        background-image: url('../../../static/images/aide/list_lkas.png');
        background-position-x: center;
        background-position-y: center;
        -moz-background-size:6%;
        background-size: 6%;
        background-repeat: no-repeat;
      }
    }
    .Sing_ul_bg{
      background: transparent;
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 2;
      top:4.19rem;
      left:0rem;
      background: rgba(128, 127, 127, 0.6);      
      // right:0;
      // bottom:0;
    }
  }
  
  .Si_ol_box{
    position: relative;
    top:0rem;
    left:0rem;
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    .Si_ol_items{
      width: 100%;
      height: 1.8rem;
      background: #fff;
      margin-bottom:.1rem;
      padding:1.4% 5.35% 4%;
      .ol_li_list{
        width: 100%;
        color:#666;
        font-size:.22rem;
        .ol_li_list1{
          width: 50%;
          height: 100%;
          .ol_li_lisiImglogo{
            height: .5rem;
            width: 0.5rem;            
            -webkit-border-radius:50%;
            -moz-border-radius:50%;
            border-radius:50%;
            img{
              height: 100%;
              width: 100%;
              -webkit-border-radius:50%;
              -moz-border-radius:50%;
              border-radius:50%;
              // width: 0.5rem;
            }
          }
        }
        .ol_li_list2{
          font-size:.26rem;
          color:#333;
          margin-left:6%;
          font-weight: 600;
        }
        .ol_li_hg{
          text-align: right;
          line-height: .5rem;
        }
        .ol_li_actcor1{
          color:#FF7200;
        }
        .ol_li_actcor2{
          color:#10C55B;
        }
        .ol_li_cormoery{
          color:#F43F3F;
          font-size:.26rem;
          font-weight: 600;
        }
        .ol_list1_last{
          padding-left:10%;
        }
      }
      .ol_list_hei{
        height: .5rem;
      }
    }
    .Si_ol_itemsNOne{
      width: 100%;
      height: 5rem;
      position: fixed;
      font-size: .5rem;
      text-align: center;
      line-height: 5rem;
      color:#666;
    }
  }
}
</style>
